<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>路径管理</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico"> <link href="__CSS__/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="__CSS__/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="__CSS__/animate.css" rel="stylesheet">
    <link href="__CSS__/style.css?v=4.1.0" rel="stylesheet">
    <style>
        .img{
            width: 10rem;;
            height:auto;
        }
        #file {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
        }
        #file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }
        #files {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
        }
        #files input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }
            #xmTanImg{
                width: 30rem;
                height: 30rem;
                position: fixed;
                top: 10rem;
                z-index: 10;
                background-repeat: no-repeat;
                background-size: 100% 100%;
            }


    </style>
</head>

<body class="gray-bg">
<div><h1>路径管理</h1></div>

<div id="xmTanImg">

</div>





        <div class="row">
                <table class="table table-hover table-bordered text-center">
                    <thead >
                    <tr >
                        <th class="text-center">图片id</th>
                        <th class="text-center">图片</th>
                        <th class="text-center">修改操作</th>
                        <th class="text-center">查看课程</th>
                        <th class="text-center">管理操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {volist name="picture" id="value"}
                    <tr>
                        <td>{$value.pid}</td>
                        <td><img src="__IMAGES__/{$value.pimg}" class="img" alt=""></td>
                        <td>
                            <form action="{:url('Website/picture_update')}?id={$value.pid}" method="post" enctype="multipart/form-data">
                                <div class="btn " type="text" id="file" > <span>选择文件</span>
                                    <input type="file" name="files"  class="files" >
                                </div>
                                <button  type="submit"  class="btn btn-danger">修改</button>
                            </form>
                        </td>

                        <td>
                            <a class="btn btn-danger" href="{:url('Website/pictrue_read')}?pid={$value.pid}">查看课程</a>
                        </td>
                        <td>
                            <button class="btn btn-danger" onclick="deletes('{$value.pid}')">删除</button>
                        </td>


                    </tr>
                    {/volist}
                    </tbody>
                </table>

        </div>
    </div>


<!-- 全局js -->
<script src="__JS__/jquery.min.js?v=2.1.4"></script>
<script src="__JS__/bootstrap.min.js?v=3.3.6"></script>
<script src="__JS__/jquery.validate.js"> </script>


<!-- 自定义js -->
<script>
    var deleteurl="{:url('Website/delete')}";
    function deletes(id) {
        if(confirm("你确定要删除这个录播图片吗  ？！")){
        $.ajax({
            url:deleteurl,
            type:"post",
            dataType:"text",
            data:{
                id:id
            },
            success:function (data) {
                if(data=="1"){
                    alert("删除成功")
                   history.go(0)
                }else{
                    alert("删除失败")
                }
            },
            error:function (e) {
                alert(e.response)
            }


        })
        }
    }
    function submits(obg) {
//        alert(123)
        alert($(obg).siblings().eq(1).val());
        if($(obg).siblings("input").val()==""){
            alert("你还没选择文件哦");
            return false;
        }else{
            return false;
        }
    }


    $(".files").on("change", function () {
        var objUrl = getObjectURL(this.files[0]); //获取图片的路径，该路径不是图片在本地的路径
        if (objUrl) {
            alert(objUrl);
            $("#xmTanImg").css("background-image", "url('"+objUrl+"')"); //将图片路径存入src中，显示出图片
//            alert(objUrl);
        }else{
        }
        $('#xmTanImg').css('display', 'block');
    });
    function getObjectURL(file) {
        var url = null;
        if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }
</script>







</body>

</html>
